<template>
  <el-dialog
      :title="classData.organization_name + ' ' + classData.grade_name + ' ' + classData.name"
      :visible="visible"
      width="80%"
      :destroy-on-close="true"
      :lock-scroll="false"
      @update:visible="updateVisible">
    <el-tabs type="border-card">
      <el-tab-pane label="班级考勤">
        <attendance-log-today v-if="visible" :id="classData.id"></attendance-log-today>
      </el-tab-pane>
      <el-tab-pane label="月统计">
        <attendance-log-month v-if="visible" :id="classData.id"></attendance-log-month>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>

import AttendanceLogMonth from './attendance-log-month.vue'
import AttendanceLogToday from './attendance-log-today.vue'

export default {
  props: {
    visible: Boolean,
    classData: Object
  },
  components: {AttendanceLogMonth, AttendanceLogToday},
  data() {
    return {}
  },
  methods: {
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
}
</script>